<template>
  <template v-if="!显示设置?.隐藏">
    <!-- 字段前面 加换行 分割线等-->
    <template v-if="字段.插槽">
      <div class=" row flex-center" :class="{ 'w-full': 字段.插槽.换行 }">
        <div v-if="字段.插槽.标题">
          {{ 字段.插槽.标题 }}
        </div>
        <div class="col-grow" v-if="字段.插槽.分割线">
          <q-separator inset />
        </div>
      </div>
    </template>
    <template v-if="字段.关联属性?.关联类型 == em.关联类型.一对多">
      <component :is="子表显示设置?.旋转子表 ? a子表_旋转 : a子表" :父单项="单项" :父元件袋="元件袋" :父字段="字段" :编辑否="编辑否" :父环境="父环境"
        :cfg="子表cfg集?.[字段.名称]" />
    </template>
    <template v-else>
      <el-form-item :label="现标题 + ':'" :prop="字段.名称" :class="字段class" :style="字段style"
        :label-position="标签位置 ? 标签位置 : 'top'" label-width="auto">
        <slot name="中间"></slot>
        <a单字段输入 :字段="字段" :单项="单项" :元件袋="元件袋" />
      </el-form-item>
    </template>
  </template>
</template>
<script setup lang="ts">
import * as em from '@/enums';
import * as util from 'amtf/utils';
import * as 元件util from 'amtf/api/元件util';
import { computed, inject, onBeforeMount } from 'vue';
import a子表 from '@/components/a子表.vue';
import a子表_旋转 from '@/components/a子表_旋转.vue';
import a单字段输入 from '@/components/a单字段输入.vue';

// const 字段hook = inject('字段hook')
const 字段hook = inject('字段hook', () => {
  console.warn('字段hook 未找到，使用默认值');
});

// 泛型写法👇辣眼睛
const props = withDefaults(defineProps<{
  字段: 字段;
  元件袋: 元件袋;
  单项: 单项;
  编辑否?: boolean;
  清底距?: boolean;
  标签位置?: string;
  标题?: string;
  字段宽?: number;
  父环境: string;
  子表cfg集?: object;
}>(),
  {
    编辑否: false
  });
const { 字段, 父环境 } = props
// let 显示设置 = 字段.显示设置_独立详情
const 显示设置: 显示设置 = {}
if (字段.显示设置) Object.assign(显示设置, 字段.显示设置)
if (字段.显示设置_独立详情) Object.assign(显示设置, 字段.显示设置_独立详情)


let 子表显示设置 = 元件util.取子表显示设置(字段, 父环境)

const 现标题 = computed(() => {
  return 元件util.成标题(props, 字段hook, 字段)
})

// function 成style(字段: 字段) {
const 字段style = computed(() => {
  const 字段 = props.字段
  let 表单字段宽 = 成表单字段宽(字段)
  let style: any = {}

  // 非展开选项
  if (!props.元件袋.取展开选项否(props.字段)) {
    // style.minWidth = `${表单字段宽}px`
    // style.width = 'auto';
    // flex-basis: auto;
    // style.flexShrink = 0;
    // style.flexBasis = `${表单字段宽}px`;
    style.width = `${表单字段宽}px`
  }
  if (util.含其中之一(props.字段.类型, [em.字段类型.图片组, em.字段类型.富文本])) {
    style.width = `100%`
  }
  return style
})

const 字段class = computed(() => {
  let res = []
  if (props.字段.类型 == em.字段类型.多行文本) {
    // return 'col-grow'
    res.push('col-grow')
  }
  if (props.清底距) {
    res.push('清底距')
  }
  // res.push('text-primary')
  return res
})

function 成表单字段宽(字段: 字段) {
  if (props.字段宽) {
    return props.字段宽
  }
  // if (字段.表单字段宽) {
  //   return 字段.表单字段宽
  // }
  if (字段.显示设置_独立详情?.宽度) {
    return 字段.显示设置_独立详情?.宽度
  } else if (字段.显示设置?.宽度) {
    return 字段.显示设置?.宽度
  }
  return 140
}

</script>
